<template>
  <section
    class="el-container"
    :class="{'is-vertical' : isVertical }"
  >
    <slot></slot>
  </section>
</template>

<script lang="ts">
export default {
  name: "ElContainer",
};
</script>

<script lang="ts" setup>

import {useSlots,computed,VNode,Component} from 'vue'

interface Props {
  direction?:string
  }
const props = defineProps()
const slots = useSlots()
const isVertical = computed(()=>{
  if(slots && slots.default){
    return slots.default().some((vn:VNode)=>{
      const tag = (vn.type as Component).name;
      //如果没有header或者footer，返回false，就不是垂直布局，反之就是垂直布局
      return tag=== 'ElHeader' || tag === 'ElFooter'
    })
    } else {
      return props.direction === 'vertical'
    }
})
</script>

<style lang="scss" scoped>
@import "../../styles/mixin";
@include b(container) {
  display: flex;
  flex-direction: row;
  flex: 1;
  flex-basis: auto;
  box-sizing: border-box;
  min-width: 0;
  @include when(vertical) {
    flex-direction: column;
  }
}
</style>
